<extend name="Public/base" />

<block name="body">
    <!-- 标题栏 -->
    <div class="main-title">
        <h2>报表</h2>
    </div>
    <div class="cf">
        <!-- 高级搜索 -->
        <div class="search-form fr cf">
            <div class="sleft">
                <input type="text" name="nickname" class="search-input" value="{:I('name')}" placeholder="请输入搜索内容">
                <a class="sch-btn" href="javascript:;" id="search" url="{:U('index')}"><i class="btn-search"></i></a>
            </div>
        </div>
    </div>
    
<div id="container" style="min-width:400px;height:400px"></div>
</block>

<block name="script">
    <script src="__STATIC__/thinkbox/jquery.thinkbox.js"></script>
	<script src="https://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>
    <script src="https://cdn.hcharts.cn/highcharts/highcharts.js"></script>
    <script src="https://cdn.hcharts.cn/highcharts-plugins/highcharts-zh_CN.js"></script>
    <script src="https://cdn.hcharts.cn/highcharts/modules/exporting.js"></script>
    <script src="https://cdn.bootcss.com/lodash.js/4.17.5/lodash.min.js"></script>
    <script type="text/javascript">
    $.ajax({
    	url:"{:U('month_report',array('ooo'=>'xxx','jjj'=>'kkk'))}",
    	success: function(json){
    		var series = [];
    		var categories = [];
    		var charData = _.groupBy(json,function(obj){return obj["memter_name"]});
    		categories = _.keys(charData);
			var map = {};
    		for(var i = 0;i<categories.length;i++ ){
    			_.forEach(charData[categories[i]],function(o){
   					var tz = o["start_time"] + "-" + o["end_time"];
   					if(!map[tz]){
   						map[tz] = new Array(categories.length);
   					}
   					map[tz][i] = parseFloat(o["use_elect"]);
    			});
    		}
    		for (var key in map) {  
    			series.push({name:key,data:map[key]});  
            }
    		$(function () {
    		    $('#container').highcharts({
    		        chart: {
    		            type: 'bar'
    		        },
    		        title: {
    		            text: '电表日报表'
    		        },
    		        subtitle: {
    		            text: '数据来源: 罗总开发的电表系统'
    		        },
    		        xAxis: {
    		            categories:categories,
    		            title: {
    		                text: "电表们"
    		            }
    		        },
    		        yAxis: {
    		            min: 0,
    		            title: {
    		                text: '使用电量 (千瓦时)',
    		                align: 'high'
    		            },
    		            labels: {
    		                overflow: 'justify'
    		            }
    		        },
    		        tooltip: {
    		            valueSuffix: ' 千瓦时'
    		        },
    		        plotOptions: {
    		            bar: {
    		                dataLabels: {
    		                    enabled: true,
    		                    allowOverlap: true
    		                }
    		            }
    		        },
    		        legend: {
    		            layout: 'vertical',
    		            align: 'right',
    		            verticalAlign: 'top',
    		            x: -40,
    		            y: 100,
    		            floating: true,
    		            borderWidth: 1,
    		            backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
    		            shadow: true
    		        },
    		        credits: {
    		            enabled: false
    		        },
    		        series:series
    		    });
    		});

          }
    	});
    
        //搜索功能
        $("#search").click(function(){
            var url = $(this).attr('url');
            var query  = $('.search-form').find('input').serialize();
            query = query.replace(/(&|^)(\w*?\d*?\-*?_*?)*?=?((?=&)|(?=$))/g,'');
            query = query.replace(/^&/g,'');
            if( url.indexOf('?')>0 ){
                url += '&' + query;
            }else{
                url += '?' + query;
            }
            window.location.href = url;
        });
        //回车搜索
        $(".search-input").keyup(function(e){
            if(e.keyCode === 13){
                $("#search").click();
                return false;
            }
        });
        //导航高亮
        highlight_subnav('{:U('index')}');
        var chart = null;
     // 获取 CSV 数据并初始化图表
   Highcharts.setOptions({
    global: {
        useUTC: false
    }
});


        
    </script>
</block>
